<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
    <% include ../partial/meta %>
    <link rel="stylesheet" href="/app/static/weixin/css/pure-min.css">
    <link rel="stylesheet" href="/app/static/weixin/css/weixin.css">
    <link rel="stylesheet" href="/app/static/weixin/css/zone-filter.css">
    <style>
        html, body {
            height: 100%;
            width: 100%;
            background: #F0F0F0;
        }
    </style>
</head>
<body>
	<header class="header">
		<a href="javascript:history.go(-1)" class="back"><img src="/app/static/weixin/img/back.png" alt="back" ></a>
		<p>租房需求</p>
        <%
            if(!bool) {
        %>
            <span class="submit-for brand-color">修改</span>
        <%
            } else {
        %>
            <span class="submit-for brand-color">提交</span>
        <%
            } 
        %>
	</header>
    <div class="main-part">
        <div class="pure-g main-target brand-color">
            <div class="pure-u-1"><strong>目标区域</strong></div>
        </div>
        <div class="pure-g main-section">
            <div class="pure-u-1-2">
                <%
                    if(requirement.requirement.region) {
                %>
                    <span name="zone"><%= requirement.requirement.district %> - <%= requirement.requirement.region %></span>
                <%
                    } else {
                %>
                    <span name="zone">请选择目标区域</span>
                <%
                    } 
                %>
            </div>
            <div class="pure-u-1-2">
                <div class="main-rate">
                <%
                    if(requirement.requirement.region) {
                %>
                    <p class="circle brand-color"><span class="rate1">40</span>%</p>
                    <p class="rate"><span class="rate1">40</span>%的用户想住在<span>前埔南区</span></p>
                <%
                    } else {
                %>
                    <p class="circle brand-color">0%</p>
                    <p class="rate whitespace nowrap">提交需求查看该区域用户比率</p>
                <%
                    } 
                %>
                </div>
            </div>
        </div>
        <div class="pure-g main-target text-gray text-small">
        <%
            if(requirement.requirement.region) {
        %>
            <div class="pure-u-1">前埔南区附近已有30套房源，平均每天增加5套</div>
        <%
            } else {
        %>
            <div class="pure-u-1">提交需求查看该区域房源数</div>
        <%
            } 
        %>
        </div>
    </div>
    <div class="main-part-reset">
        <div class="pure-g main-target brand-color">
            <div class="pure-u-1"><strong>租金预算</strong></div>
        </div>
        <div class="pure-g main-section">
            <div class="pure-u-1-2">
            <%
                if(requirement.requirement.price) {
            %>
                <span name="price"><%= requirement.requirement.price %></span>
            <%
                } else {
            %>
                <span name="price">请选择租金预算</span>
            <%
                } 
            %>
            </div>
            <div class="pure-u-1-2">
                <div class="main-rate">
                <%
                    if(requirement.requirement.price) {
                %>
                    <p class="circle brand-color"><span class="rate2">40</span>%</p>
                    <p class="rate"><span class="rate2">40</span>%的用户想住在<span>前埔南区</span></p>
                <%
                    } else {
                %>
                    <p class="circle brand-color">0%</p>
                    <p class="rate whitespace nowrap">提交需求查看该预算用户比率</p>
                <%
                    } 
                %>
                </div>
            </div>
        </div>
        <div class="pure-g main-target text-gray text-small">
            <%
                if(requirement.requirement.price) {
            %>
                <div class="pure-u-1">目标区域在预算范围可搭伙的房源有30套</div>
            <%
                } else {
            %>
                <div class="pure-u-1">提交需求查看该预算范围房源数</div>
            <%
                } 
            %>
        </div>
    </div>
    <div class="main-part-reset">
        <div class="pure-g main-target brand-color">
            <div class="pure-u-1"><strong>预住时间</strong></div>
        </div>
        <div class="pure-g main-section" style="border-bottom:none">
            <div class="pure-u-1-2">
            <%
                if(requirement.requirement.day) {
            %>
                <span name="day"><%= requirement.requirement.day %>天内</span>
            <%
                } else {
            %>
                <span name="day">请选择预住时间</span>
            <%
                } 
            %>   
            </div>
            <div class="pure-u-1-2">
                <div class="main-rate">
                <%
                    if(requirement.requirement.day) {
                %>
                    <p class="circle brand-color"><span class="rate3">40</span>%</p>
                    <p class="rate"><span class="rate3">40</span>%的用户想住在<span>前埔南区</span></p>
                <%
                    } else {
                %>
                    <p class="circle brand-color">0%</p>
                    <p class="rate whitespace nowrap">提交需求查看该时间段用户比率</p>
                <%
                    } 
                %>
                </div>
            </div>
        </div>
        
    </div>
    <br>
    <script src="/app/static/weixin/js/zepto.min.js"></script>
    <script src="/app/static/weixin/js/pubsub.js"></script>
    <script src="/app/static/weixin/js/template.js"></script>
    <script src="/app/static/weixin/js/reqFilter.js"></script>
    <script>
        if (!Array.prototype.forEach) {
            Array.prototype.forEach = function forEach(callback) {
                var len = this.length;
                if (typeof callback != "function") {
                    throw new TypeError();
                }
                var thisArg = arguments[1];
                for (var i = 0; i < len; i++) {
                    if (i in this) {
                        callback.call(thisArg, this[i], i, this);
                    }
                }
            }
        }
    </script>
    <script>
        $(function() {

            const api_host = "http://api.fangmm.com/v3";
            var post_url = '/requirements';
            var rate_url = '/statistics/requirement';
            var bool = eval('<%= bool %>');
            var requirementId = "<%= requirement.requirement.requirementId %>"
            var util = (function() {
                return {
                    getZone: function(url, callback) {
                        $.get(url, function(data) {
                            if(0 == data.code) {
                                callback(data)
                            } else {
                                console.log(data.msg)
                            }
                        }, 'json')
                    },
                    postRequirement: function(url, method, data, callback) {
                        $.ajax({
                            url: url,
                            type: method,
                            headers: { 
                                "Authorization" : "bearer <%= token %>"
                            },
                            data: data,
                            dataType:"json",
                            success: function(data) {
                                if(0 == data.code) {
                                    callback(data)
                                } else {
                                    console.log(data)
                                }
                            }
                        }) 
                    },
                    serialize: function(params) {
                        var array = [];
                        for (var p in params) {
                            array.push(p + '=' + params[p]);
                        }
                        return array.join('&');
                    }

                }
            })();
            util.getZone(api_host + '/settings/cities/3502', function(data) {
                new zoneFilter(data);
            });
            new screenFilter();
            new sortFilter();


            var $body               = $('html');
            var $win                = $(window);
            var $submit             = $('.submit-for');
            var zoneItem            = $('[name="zone"]'),
                priceItem          = $('[name="price"]'),
                dayItem            = $('[name="day"]');
            var mapFilter           = [
                {item: zoneItem, class: 'zone'},
                {item: priceItem, class: 'filter'},
                {item: dayItem, class: 'sort'}
            ];

            var params              = {
                app: 'm',
                userId: '<%= userId %>',
                district: '<%= requirement.requirement.district %>',
                region: '<%= requirement.requirement.region %>',
                regionCode: '<%= requirement.requirement.regionCode %>',
                price: '<%= requirement.requirement.price %>',
                day: '<%= requirement.requirement.day %>',
                app: 'm',
            }
            var paramsMap = {
                district: '请选择目标区域',
                region: '请选择目标区域',
                regionCode: '请选择目标区域',
                price: '请选择租金预算',
                day: '请选择预住时间'
            }

            if(!bool) {
                util.getZone(api_host + rate_url + '?' + util.serialize(params), function(data) {
                    console.log(data)
                    var $rate1 = $('.rate1'), $rate2 = $('.rate2'), $rate3 = $('.rate3');
                    $rate1.text(data.region.userRate);
                    $rate3.text(data.day.userRate);

                })
            }

            for( var i = 0; i < mapFilter.length; i++) {
                (function(i){
                    mapFilter[i].item.on('click', function(event) {
                        $body.addClass(mapFilter[i].class)
                    });
                })(i)
            }

            var renderFilter = function(msg, data){
                for (var key in data) {
                    if(params.hasOwnProperty(key)) {
                        params[key] = data[key];
                    }
                }
                mapFilter[msg].item.text(data.name);
               
            };

            PubSub.subscribe( '0', renderFilter );
            PubSub.subscribe( '1', renderFilter );
            PubSub.subscribe( '2', renderFilter );

            $submit.on('click', function(event) {

                var url;
                var method;
                var message;
                var interrupted = false;
                Object.keys(params).forEach(function(key) {
                    if(!interrupted) {
                        if(!params[key]) {
                            alert(paramsMap[key]);
                            interrupted = true;
                        }
                    }
                })
                if(!interrupted) {
                    if(!bool) {
                        url = api_host + post_url + '/' + requirementId; 
                        method = 'PUT';
                        message = '需求修改成功！';
                    } else {
                        url = api_host + post_url
                        method = 'POST';
                        message = '需求提交成功！';
                        
                    }
                    
                    util.postRequirement(url, method, params, function(data) {
                        alert(message);
                        location.reload();
                    })
                }
            });


        })
    </script>
</body>
<% include ../partial/analyse %>
</html>
\